<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>实时车况</title>
  <!-- import CSS -->
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
  <link href="../css/common.css" rel="stylesheet">
  <!-- import Vue before Element -->
  <script src="../plugins/ElementUI/vue-2.5.16.js" type="text/javascript"></script>
  <!-- import JavaScript -->
  <script src="../plugins/ElementUI/index-2.3.9.js" type="text/javascript"></script>
  <script src="../plugins/ElementUI/vue-resource.min.js"></script>
  <!-- map -->
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ePOIA9rln4os58j2HQnx3AW0Sdy9MiQv"></script>
  <style>
    .row .alarm{
      background-color: #23c6c8;
      color: #fff;
      border-radius: 5px;
      padding: 8px 10px;
      float: left;
      margin: 10px;
    }
    .el-table__row{
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="app" v-cloak v-show="appShow"  class="animated fadeInRight">
    <el-form ref="tripParames" :model="tripParames" label-width="80px" style="width: 900px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="车牌号">
            <el-input v-model="tripParames.plateNo" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="VIN码">
            <el-input v-model="tripParames.vin" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="选择时间">
            <el-date-picker
              type="datetimerange"
              v-model="tripTimes"
              align="center"
              size="small"
              style="width:100%;font-size: 12px"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item>
            <el-button type="primary" @click="onSubmit" clearable size="small" >&nbsp;&nbsp;查询&nbsp;&nbsp;</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <br>
    <!-- table -->
    <el-table :data="tableData.list" border size="small" :max-height="windowHeight" style="width: 100%" >
      <el-table-column type="index" ></el-table-column>
      <el-table-column prop="plateNo" label="车牌号"> </el-table-column>
      <el-table-column prop="vehicleType" label="类型"> </el-table-column>
      <el-table-column prop="vinCode" label="车架号" width=""></el-table-column>
      <el-table-column prop="gmt_create" label="注册时间"></el-table-column>
      <el-table-column prop="gmt_modified" label="修改时间"></el-table-column>
      <el-table-column label="是否在线" width="">
          <template slot-scope="scope">
              <span class="label-inuse" v-if="scope.row.online">在线</span>
              <span class="label-outuse" v-else>不在线</span>
          </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary"  @click="handleInfo(scope.row)">实时车况</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <!-- page -->
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :current-page.sync="tripParames.page"
      :page-size="tripParames.pageSize"
      :total="tableData.totalElement">
    </el-pagination>
    <!------------------------- dialog condition start ----------------------->
    <el-dialog
      title="车况信息"
      width="40%"
      :visible.sync="dialogVisible">
        <div>
          <el-collapse v-model="activeNames">
            <el-collapse-item title="车门-车窗状态" name="1">
                <el-row>
                  <el-col :span="6" v-for="item in translateVehicleData.doorsWindows">
                    <div>{{item.label}}：{{item.value}}</div>
                  </el-col>
                </el-row>
            </el-collapse-item>
            <el-collapse-item title="轮胎-胎压温度状态" name="2">
                <el-row>
                  <el-col :span="6" v-for="item in translateVehicleData.tempPressure">
                    <div>{{item.label}}：{{item.value}}</div>
                  </el-col>
                </el-row>
            </el-collapse-item>
            <el-collapse-item title="车灯状态" name="3">
                <el-row>
                  <el-col :span="6" v-for="item in translateVehicleData.lightStatus">
                    <div>{{item.label}}：{{item.value}}</div>
                  </el-col>
                </el-row>
            </el-collapse-item>
            <el-collapse-item title="其他信息" name="4">
                <el-row>
                  <el-col :span="6" v-for="item in translateVehicleData.others">
                    <div>{{item.label}}：{{item.value}}</div>
                  </el-col>
                </el-row>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" size="small" @click="dialogVisibleReload">刷 新</el-button>
        </div>
    </el-dialog>
    <!------------------------- dialog condition end ----------------------->
  </div>
</body>
  <script src="../plugins/Underscore/underscore-min.js"></script>
  <script src="../js/ApiRequest.js"></script>
  <script src="../js/mars2baidu.js"></script>
  <script>
    var vm=new Vue({
      el: '#app',
      data: function() {
        return {
          appShow:false,
          resourceMap:storageLocal.getName('vehicleCondition'),
          tableData: [],
          windowHeight:(window.innerHeight||(document.documentElement&&document.documentElement.clientHeight)||document.body.clientHeight) - 170,
          tripParames:{
            page:1,
            pageSize:20,
            vin:"",
            startTime:"",
            endTime:"",
            plateNo:"",
            orgId:""
          },
          tripTimes:"",
          dialogVisible:false,
          activeNames:['1','2','3','4'],
          translateVehicleData:{},
          temporaryData:null,
        }
      },
      mounted:function(){
        this.$nextTick(function(){
          this.requestModel()
        })
      },
      updated:function(){
        this.appShow = true
      },
      methods: {
          onSubmit:function() {//查询
            this.requestModel()
          },    
          handleCurrentChange:function(val) {//table-分页
            this.requestModel()
          },
          requestModel:function(){
            var data = {
              vin:this.tripParames.vin,
              startTime:this.tripParames.startTime,
              endTime:this.tripParames.endTime,
              plateNo:this.tripParames.plateNo,
              orgId:this.tripParames.orgId,
              page:this.tripParames.page - 1,
              pageSize:this.tripParames.pageSize
            }
            resourceRequst("/vehicle/queryVehicleInfo",data,function(res){
                vm.tableData = res.getResult
            })
          },
          // dialog 手动刷新
          dialogVisibleReload:function(){
            this.handleInfo(this.temporaryData)
          },
          // 根据时间和车架号查询车辆的所有行程记录
          handleInfo:function(row){
            var _this = this;
            this.temporaryData = row
            resourceRequst("/vehicle/queryRealTimeVehicleState",{vin:row.vinCode},function(res){
              _this.translateData(res.stateInfo)
            })
          },
          translateData:function(data){
            var _this = this;
            var temporary = {
              "doorsWindows":[],
              "tempPressure":[],
              "lightStatus":[],
              "others":[]
            } 
            for(var i in data){
              switch(i)
              {
                //  轮胎-胎压温度状态
                case 'leftFrontTireTemp':
                  temporary.tempPressure.push({
                      label:"左前轮温度",
                      value:data[i]
                  })
                  break;
                case 'rightFrontTireTemp':
                  temporary.tempPressure.push({
                      label:"右前轮温度",
                      value:data[i]
                  })
                  break;
                case 'leftRearTireTemp':
                  temporary.tempPressure.push({
                      label:"左后轮温度",
                      value:data[i]
                  })
                  break;
                case 'rightRearTireTemp':
                  temporary.tempPressure.push({
                      label:"右后轮温度",
                      value:data[i]
                  })
                  break;
                case 'spareTireTemp':
                  temporary.tempPressure.push({
                      label:"备胎温度",
                      value:data[i]
                  })
                  break;
                case 'leftFrontTirePressure':
                  temporary.tempPressure.push({
                      label:"左前轮胎压",
                      value:data[i]
                  })
                  break;
                case 'rightFrontTirePressure':
                  temporary.tempPressure.push({
                      label:"右前轮胎压",
                      value:data[i]
                  })
                  break;
                case 'leftRearTirePressure':
                  temporary.tempPressure.push({
                      label:"左后轮胎压",
                      value:data[i]
                  })
                  break;
                case 'rightRearTirePressure':
                  temporary.tempPressure.push({
                      label:"右后轮胎压",
                      value:data[i]
                  })
                  break;
                case 'spareTirePressure':
                  temporary.tempPressure.push({
                      label:"备胎胎压",
                      value:data[i]
                  })
                  break;
                //  车门-车窗状态
                case 'doorLf':
                  temporary.doorsWindows.push({
                      label:"左前门",
                      value:data[i]?'开启':'关闭'
                  })
                  break;
                case 'doorRf':
                  temporary.doorsWindows.push({
                      label:"右前门",
                      value:data[i]?'开启':'关闭'
                  })
                  break;
                case 'doorLr':
                  temporary.doorsWindows.push({
                      label:"左后门",
                      value:data[i]?'开启':'关闭'
                  })
                  break;
                case 'doorRr':
                  temporary.doorsWindows.push({
                      label:"右后门",
                      value:data[i]?'开启':'关闭'
                  })
                  break;
                case 'trunk':
                  temporary.doorsWindows.push({
                      label:"后备箱",
                      value:data[i]?'开启':'关闭'
                  })
                  break;
                case 'lockLs':
                  temporary.doorsWindows.push({
                    label:"左侧门锁",
                    value:data[i]?'锁定':'解锁'
                  })
                  break;
                case 'lockRs':
                  temporary.doorsWindows.push({
                    label:"右侧门锁",
                    value:data[i]?'锁定':'解锁'
                  })
                  break;
                case 'lockCentral':
                  temporary.doorsWindows.push({
                    label:"中控锁",
                    value:data[i]?'锁定':'解锁'
                  })
                  break;
                case 'leftFrontWindowState':
                  var status = _this.windowStatus(data[i]);
                  temporary.doorsWindows.push({
                    label:"左前窗状态",
                    value:status
                  })
                  break;
                case 'rightFrontWindowState':
                  var status = _this.windowStatus(data[i]);
                  temporary.doorsWindows.push({
                    label:"右前窗状态",
                    value:status
                  })
                  break;
                case 'leftRearWindowState':
                  var status = _this.windowStatus(data[i]);
                  temporary.doorsWindows.push({
                    label:"左后窗状态",
                    value:status
                  })
                  break;
                case 'rightRearWindowState':
                  var status = _this.windowStatus(data[i]);
                  temporary.doorsWindows.push({
                    label:"右后窗状态",
                    value:status
                  })
                  break;
                // 车灯状态
                case 'dayLight':
                  temporary.lightStatus.push({
                      label:"日行灯",
                      value:data[i]?'开启':'关闭'
                  })
                  break;
                case 'lowLamp':
                  temporary.lightStatus.push({
                      label:"近光灯",
                      value:data[i]?'开启':'关闭'
                  })
                  break;
                case 'highLamp':
                  temporary.lightStatus.push({
                      label:"远光灯",
                      value:data[i]?'开启':'关闭'
                  })
                  break;
                case 'backLight':
                  temporary.lightStatus.push({
                      label:"车尾灯",
                      value:data[i]?'开启':'关闭'
                  })
                  break;
                case 'bFogLamp':
                  temporary.lightStatus.push({
                      label:"前雾灯",
                      value:data[i]?'开启':'关闭'
                  })
                  break;
                case 'aFogLamp':
                  temporary.lightStatus.push({
                      label:"后雾灯",
                      value:data[i]?'开启':'关闭'
                  })
                  break;
                case 'placeLamp':
                  temporary.lightStatus.push({
                      label:"位置灯",
                      value:data[i]?'开启':'关闭'
                  })
                  break;
                case 'bLight':
                  temporary.lightStatus.push({
                      label:"刹车灯",
                      value:data[i]?'开启':'关闭'
                  })
                  break;
                case 'tSignalState':
                  var status = _this.tSignalState(data[i])
                  temporary.lightStatus.push({
                      label:"转向灯状态",
                      value:status
                  })
                  break;
                // 其他
                case 'startStatus':
                  temporary.others.push({
                      label:"启动状态",
                      value:data[i]?'熄火':'启动'
                  })
                  break;
                case 'eState':
                  var status = _this.eState(data[i])
                  temporary.others.push({
                      label:"电门状态",
                      value:status
                  })
                  break;
                case 'honkState':
                  temporary.others.push({
                      label:"鸣笛状态",
                      value:data[i]?'开启':'关闭'
                  })
                  break;
                case 'hood':
                  temporary.others.push({
                      label:"引擎盖",
                      value:data[i]?'开启':'关闭'
                  })
                  break;
                case 'remainMileage':
                  temporary.others.push({
                      label:"剩余里程",
                      value:data[i]
                  })
                  break;
                // case 'cause':
                //   var status = _this.cause(data[i])
                //   temporary.others.push({
                //       label:"故障原因",
                //       value:status
                //   })
                //   break;
                    
              }
            }
           
            this.translateVehicleData = temporary;
            this.dialogVisible = true;
          },
          windowStatus:function(statu){
            var status = "";
            if(statu == 0) status = "未知"
            if(statu == 1) status = "关闭"
            if(statu == 2) status = "打开"
            if(statu == 3) status = "留缝"
            return status
          },
          tSignalState:function(statu){
            var status = "";
            if(statu == 0) status = "关闭"
            if(statu == 1) status = "左转"
            if(statu == 2) status = "右转"
            if(statu == 3) status = "双闪"
            if(statu == 7) status = "长亮"
            return status
          },
          eState:function(statu){
            var status = "";
            if(statu == 0) status = "关闭"
            if(statu == 1) status = "ACC打开"
            if(statu == 2) status = "点火"
            return status
          },
          cause:function(statu){
            var status = "";
            if(statu == 1) status = "启动失败 档位不在P/N"
            if(statu == 2) status = "启动失败 车速不为0"
            if(statu == 3) status = "启动失败 ESCL解锁失败"
            return status
          }
        }
    })
  </script>
</html>